<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="./bower_components/vue/dist/vue.js"></script>
    <script type="text/javascript">
        // Extend Vue to get a reusable constructor
        var aa = Vue.extend({
            created: function () {
                console.log('An instance of MyComponent has been created!')
            },
            template: 'A custom component <input v-model="$parent.title" type="text"/>',
            data: function(){
                return {
                    title:"123"
                }
            }
        });

        Vue.component('my-component', aa);
    </script>
</head>
<body>
<div id="demo">
    <h1>{{title | uppercase}}</h1>
    <div v-component="my-component"></div>
</div>

<div id="demo2">
    <h1>{{title | uppercase}}</h1>
    <input type="text" v-model="title"/>
</div>

<hr>

<style type="text/css">
    body {
        font-family: Helvetica Neue, Arial, sans-serif;
    }

    li.done {
        text-decoration: line-through;
    }

</style>

<script type="text/javascript">


    var originData = {
        title:"todos"
    };

    var demo = new Vue({
        el: '#demo',
        data: originData
    });


    var demo2 = new Vue({
        el: '#demo2',
        data: originData
    });



</script>



</body>
</html>